<template>
	<uv-popup ref="popup" type="center">
		<template v-if="character.list.length">
			<uv-radio-group v-model="formData.characterId">
				<uv-radio :customStyle="{margin: '8px'}" v-for="(item, index) in character.list" :key="index" :label="item.nickname" :name="item.characterId"></uv-radio>
			</uv-radio-group>
			<uv-form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<uv-form-item label="群号" prop="groupCode" borderBottom required>
					<uv-input v-model="formData.groupCode" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="备注" prop="explain" borderBottom>
					<uv-input v-model="formData.explain" border="none"></uv-input>
				</uv-form-item>
				<uv-button type="primary" text="提交" :loading="btnLoading" customStyle="margin-top: 10px" @click="submitApply"></uv-button>
			</uv-form>
		</template>
		<template v-else>
			<view class="avatars uv-flex-row">
				<view @click="selectStudentIndex = index" class="item" :class="[{'active':selectStudentIndex == index}]" v-for="(item,index) in studentList" :key="index" style="cursor: pointer;margin: 10px;">
					<uv-avatar :src="`/static/images/character/${item.avatar}-small.png`" size="40px" mode="aspectFill"></uv-avatar>
				</view>
			</view>
			<uv-form labelPosition="left" :model="formData" :rules="rules" ref="form" label-width="100px">
				<uv-form-item label="角色名称" prop="nickname" borderBottom required>
					<uv-input v-model="formData.nickname" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="群号" prop="groupCode" borderBottom required>
					<uv-input v-model="formData.groupCode" border="none"></uv-input>
				</uv-form-item>
				<uv-form-item label="备注" prop="explain" borderBottom>
					<uv-input v-model="formData.explain" border="none"></uv-input>
				</uv-form-item>
				<uv-button type="primary" text="创建角色并申请" :loading="btnLoading" customStyle="margin-top: 10px" @click="submitCreateApply"></uv-button>
			</uv-form>
		</template>
	</uv-popup>
</template>
<script setup>
	import { computed, reactive, ref, watch } from 'vue';
	import { getUserCharacterList } from '@/common/js/getData.js';
	import { createCharacter } from '@/common/api/character.js';
	import { characterList, randomCharacterName } from '@/common/js/character.js';
	import { setLocalCharacter } from '@/common/js/character.js';
	import { groupApplyCreate } from '@/common/api/group.js';
	const emits = defineEmits(['reload']);
	const form = ref(null);
	const popup = ref(null);
	const props = defineProps({
		groupCode: {
			type: String,
			default: ''
		}
	})
	const character = reactive({
		list: []
	})
	const formData = reactive({
		avatar: '',
		nickname: '',
		characterId: '',
		groupCode: '',
		explain: ''
	})
	const rules = {
		groupCode: {
			type: 'string',
			required: true,
			message: '请填写群号',
			trigger: ['blur', 'change']
		}
	}
	watch(() => props.groupCode, (newVal) => {
		if (newVal) formData.groupCode = newVal;
	})
	watch(() => formData.characterId, (newVal) => {
		if (newVal && character.list.length) {
			const find = character.list.find(item => item.characterId == newVal);
			formData.avatar = find.avatar;
			formData.nickname = find.nickname;
		}
	})
	const studentList = computed(() => {
		const findChildren = characterList.find(item => item.type == 'STUDENT').children;
		const { member_time } = getApp().globalData.store?.userInfo;
		if (member_time > 0) {
			return findChildren;
		} else {
			return findChildren.filter(item => !item.needVip);
		}
	})
	const selectStudentIndex = ref(0);
	const btnLoading = ref(false);
	// 获取用户角色
	async function init() {
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const res = await getUserCharacterList();
		character.list = res.filter(item => item.type == 'STUDENT');
		if (character.list.length) {
			const findIndex = character.list.findIndex(item => item.characterId == characterId);
			formData.characterId = findIndex > -1 ? character.list[findIndex].characterId : character.list[0].characterId;
		} else {
			formData.nickname = randomCharacterName();
			rules.nickname = {
				type: 'string',
				required: true,
				message: '请填写角色名称',
				trigger: ['blur', 'change']
			}
		}
	}
	// 创建角色并申请群组
	async function submitCreateApply() {
		btnLoading.value = true;
		formData.avatar = studentList.value[selectStudentIndex.value].avatar;
		const { data } = await createCharacter({
			nickname: formData.nickname,
			avatar: formData.avatar,
			type: 'STUDENT'
		})
		formData.characterId = data.characterId;
		character.list = [data];
		setLocalCharacter(data);
		submitApplyRequest();
	}
	// 申请群组
	function submitApply() {
		btnLoading.value = true;
		form.value.validate().then(res => {
			submitApplyRequest();
		}).catch(err => {
			btnLoading.value = false;
		})
	}
	// 提交申请
	async function submitApplyRequest() {
		try {
			await groupApplyCreate({
				...formData,
				uid: uniCloud.getCurrentUserInfo().uid
			})
			emits('reload');
			popup.value.close();
		} catch (e) {}
		btnLoading.value = false;
	}

	function open() {
		popup.value.open();
	}
	defineExpose({
		open
	})
	init();
</script>
<style scoped>
	.avatars .item.active {
		outline: 2px solid red;
		border-radius: 50%;
	}
</style>